import { ClockIcon, RulerIcon, TagsIcon, UserRoundIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { useSelectedTestStore } from "@/stores/useSelectedTestStore";
import { TestsError } from "./tests-error";
import { TestSteps } from "./tests-steps";

export function TestsDetail() {
  const test = useSelectedTestStore((state) => state.selectedTest);
  if (!test) return null;
  const severity = test.labels?.find((label) => label.name === "severity");
  return (
    <div className="flex h-full w-full flex-col">
      <div className="sticky top-0 z-10 flex flex-col gap-2 border-b bg-background p-3">
        <div className="flex items-center justify-start gap-2">
          <Badge
            variant={test.status === "passed" ? "default" : "destructive"}
            className="uppercase"
          >
            {test.status}
          </Badge>
          <p className="truncate">{test.name}</p>
        </div>
        <div className="grid text-sm xl:grid-cols-2">
          <ul className="grid grid-cols-2 gap-2">
            <li className="flex items-center gap-2">
              <TagsIcon className="size-3.5" />
              <p>Tags</p>
            </li>
            <li className="flex items-center gap-2">
              {test?.extra?.tags.map((tag) => (
                <p key={tag} className="bg-secondary px-2 text-secondary-foreground">
                  {tag}
                </p>
              ))}
            </li>
            <li className="flex items-center gap-2">
              <RulerIcon className="size-3.5" />
              <p>Severity</p>
            </li>
            <li className="flex items-center gap-2">{severity?.value}</li>
            <li className="flex items-center gap-2">
              <ClockIcon className="size-3.5" />
              <p>Duration</p>
            </li>
            <li className="flex items-center gap-2">
              {Math.ceil((test.time?.duration as number) / 1000)} s
            </li>
            <li className="flex items-center gap-2">
              <UserRoundIcon className="size-3.5" />
              <p>Owner</p>
            </li>
            <li className="flex items-center gap-2">{test?.extra?.owner}</li>
          </ul>
        </div>
      </div>
      {test.status !== "passed" && <TestsError test={test} />}
      <TestSteps test={test} />
    </div>
  );
}
